import { Html } from "@react-three/drei";
import { createRef, useEffect, useRef } from "react";
import "./index.less";
import { NMold, RSetState } from "../../config/constants";
import { reducer, useConnect } from "../../utils/dva17";
import { useThree } from "@react-three/fiber";

// html构建的点位
export default function Points() {
  /*----------------------变量声明---------------------------*/
  const { points } = useConnect(NMold);
  const meshRefs: any = useRef([]); // 创建mesh引用的数组
  const { camera } = useThree();

  /*-----------------------生命周期--------------------------*/
  useEffect(() => {
    reducer(NMold, RSetState, { camera });
  }, []);
  /*-----------------------函数事件--------------------------*/

  // 点击点位
  async function handleClick(item: any, e: any) {
    console.log("点击点位", item);
    e.stopPropagation();
  }

  /*------------------------渲染函数---------------------------*/
  return (
    <group>
      {points.map((item: any, index: number) => {
        if (!meshRefs.current[index]) {
          // 如果还没有创建该点的mesh引用，则创建一个新的引用
          meshRefs.current[index] = createRef();
        }
        const meshRef = meshRefs.current[index];

        return (
          <mesh
            key={index}
            ref={meshRef}
            position={item.coordinates}
            name={"point-" + index}
          >
            <Html center>
              <div
                className="icon2d css2d"
                onClick={(e) => handleClick(item, e)}
              >
                <img crossOrigin="anonymous" src={""} alt="" />
                {item.title}
              </div>
            </Html>
          </mesh>
        );
      })}
    </group>
  );
}
